<template>
  <div>
    <h2>侦听器</h2>
  <input type="text" v-model.lazy="uname">
  </div>
</template>

<script>
    export default {
    data(){
      return{
        uname:'zhangsan',
        dog:{
          name:'旺财',
          age:2
        }
      }
    },
    // 侦听器 要写到和data平级的watch里面
    watch:{
      // 1.函数写法
      // uname(newVal,oldVal){
      //   console.log(newVal,oldVal);

      // }
      // 2.对象写法 (写成对象，就是为了加 immediate 或 deep 选项)
      uname:{
        handler(newVal,oldVal){  //写对象格式handler必须写，名字固定
          console.log(newVal,oldVal);
        },
        immediate:true //加入这个选项，表示立即侦听
      },
      // dog:{
      //   handler(newVal,oldVal){
      //     console.log(newVal,oldVal);
      //   },
      //   deep:true //深度侦听，用于侦听对象的属性变化
      // }


      // 只侦听对象的某个属性
      'dog.age'(newVal){
        console.log(newVal);
      }
     }
    }
    </script>

    <style>

    </style>